
// 首页业务

// 从本地获取用户名
// const user=localStorage.getItem('user')
// document.querySelector('.username').innerHTML=user

// 调用鉴权函数
checkLogin()

    // 退出登录
    logout()
    // 调用用户名
    renderUser()

    // 渲染统计数据
    async function getData(){
        // const token=localStorage.getItem('token')
        const {data:{
            groupData,overview,year,salaryData,provinceData
        }}=await axios('/dashboard')
    // const {data:{data:{
    //     groupData,overview,year,salaryData,provinceData
    // }}}=await axios({
    //     url:'/dashboard',
    //     // headers:{
    //     //     Authorization: token
    //     // }
    // })
    // document.querySelector('.salary').innerHTML=overview.salary
    // document.querySelector('.age').innerHTML=overview.age
    // document.querySelector('.student_count').innerHTML=overview.student_count
    // document.querySelector('.group_count').innerHTML=overview.group_count

    // 
    // 调用函数
    renderOverview(overview)
    renderYearSalary(year)
    renderSalary(salaryData)
    renderGroup(groupData)
    renderGenderData(salaryData)
    renderProvinceData(provinceData)
    }
    getData()

// 概览业务
function renderOverview(overview){
    Object.keys(overview).forEach((key)=>{
        document.querySelector(`.${key}`).innerHTML=overview[key]
    })
}
// 薪资走势
function renderYearSalary(year){
const myChart=echarts.init(document.querySelector('#line'))
const option={
    xAxis: {
        // type: '2024全学科薪资走势',
        // left:13,
        // top:10,
        boundaryGap: false,
        data:year.map(item=>item.month),
        axisLine:{
          lineStyle:{
            // color:'#999',
            type:'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine:{
          lineStyle:{
            type:'dashed'
          }
        }
      },
      series: [
        {
          data: year.map(item=>item.salary),
          type: 'line',
          areaStyle: {
            color: {
              type: 'linear',

            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#9bd7fb' // 0% 处的颜色
            }, {
                offset: 1, color: '#f1fbfb' // 100% 处的颜色
            }],
          }
          },
          smooth:true,
        //   标记大小
          symbolSize:5,
        //   线条样式
          lineStyle:{
            width:3,
            color:{
                 type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#a0d0fb' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#426cf0' // 100% 处的颜色
                    }],
            }
        }


        }
      ]
};
myChart.setOption(option)
}
// 薪资分布
function renderSalary(salaryData){
const myChart=echarts.init(document.querySelector('#salary'))
const option={
    title:{
      text:'班级薪资分布',
      left:10,
      top:10
    },
    // 提示组件
    tooltip: {
      trigger: 'item',
      // data是提示内容
      data:['班级薪资分布']
    },
    // 图例组件
    legend: {
     bottom: '5%',
      left: 'center'
    },
    series: [
     
      {
        // 和提示组件中的data的值保持一致
        name: '班级薪资分布',
        type: 'pie',
        radius: ['50%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data:salaryData.map(item=>{
          return{value:item.g_count+item.b_count,name:item.label}
        })
        //  [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
          
        // ]
        
      }
    ],
    // 设置图表的颜色，数组中的颜色设置顺序是顺时针
    color:['#f0a645','#3f8cfb','#28b9fb','#25d28e']
  };

  myChart.setOption(option)
}
// 分组数据
function renderGroup(groupData){
const myChart=echarts.init(document.querySelector('#lines'))
const option={
    xAxis: {
      type: 'category',
      // 名字
      data: groupData[1].map(item=>item.name),
      axisLine:{
        lineStyle:{
          color:'#999',
          type:'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
       splitLine:{
        lineStyle:{
          type:'dashed'
        }
      }
    },
    series: [
      // 期待薪资
      {
        data: groupData[1].map(item=>item.hope_salary),
        type: 'bar',
        itemStyle:{
            color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#70d2a2' // 0% 处的颜色
            }, {
                offset: 1, color: '#ccefde' // 100% 处的颜色
            }],
         
          },
        }
      },
      // 实际薪资
      {
        data: groupData[1].map(item=>item.salary),
        type: 'bar',
        itemStyle:{
          color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: '#6faff9' // 0% 处的颜色
          }, {
              offset: 1, color: '#d2e3f8' // 100% 处的颜色
          }],
       
        },
      }
      }
    ]
  };
  myChart.setOption(option)
}

// 男女薪资
function renderGenderData(salary){
    const myChart=echarts.init(document.querySelector('#gender'))
    const datas=[
        salary.map(item=>{
          return {name:item.label,value:item.b_count}
        }),
        salary.map(item=>{
          return {name:item.label,value:item.g_count}
        }),
        ]
          const option={
            
              title: [
                {
                text: '男女薪资分布',
                left: 10,
                top:10,
                textStyle: {
               
                  fontWeight: 'normal',
                  fontSize: 16
                }
                },
                {
                text: '男生',
                left: 'center',
                top:'42%',
                textStyle: {
                  color: '#999',
                  fontWeight: 'normal',
                  fontSize: 14
                }
              },
              {
                 text: '女生',
                left: 'center',
                bottom:'5%',
                textStyle: {
                  color: '#999',
                  fontWeight: 'normal',
                  fontSize: 14
                }
              }
                ],
                tooltip:{
                  trigger:'item'
                },
              series: datas.map(function (data, idx) {
                var top = idx * 40+10;
                return {
                  type: 'pie',
                  radius: [30, 50],
                  top: top + '%',
                  height: '33.33%',
                  left: 'center',
                  width: 300,
                  itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  data: data,
                  color:['#fb9a2a','#1b8ffb','#00bcfb','#00da8a']
                };
              })
            
          };
          myChart.setOption(option)
}
// }
// 籍贯分布
function renderProvinceData(mapData){
const myChart=echarts.init(document.querySelector('#map'))
const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]
  dataList.forEach(item=>{
    const res=mapData.find(ele=>ele.name.includes(item.name))
    if(res){
        item.value=res.value
    }
  })
  const option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myChart.setOption(option)
}
